<%@ page language="java" pageEncoding="UTF-8" %>
<!doctype html>
<html lang="zh-CN">
<head>
    <title>银成教育</title>
    <%@include file="/WEB-INF/views/commons/common.jsp" %>
    <link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/login/css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/login/css/default.css">
    <link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/login/css/styles.css">
    <style>
        .divcss5-a {
            line-height: 30px
        }

        /* css 注释说明：设置行距行高30px */
        .divcss5-b {
            line-height: 40px
        }

        /* 设置行距行高22px */
    </style>
</head>
<body>
<div class="login-wrap">
    <div class="login-html">
        <input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1"
                                                                                 class="tab divcss5-a">${form.paperName }</label>
        <input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab"></label>
        <div class="login-form">
            <form method="post" action="startAnswer">
                <input type="hidden" name="paperId" value="${paperId }"/>
                <div class="sign-in-htm">
                    <div class="group">
                        <label for="user" class="label">手机号</label>
                        <input id="telephone" name="userName" type="text" class="input" maxlength="11">
                    </div>
<%--                    <div class="group" style="overflow:auto;">--%>
<%--                        <label for="user" class="label">验证码</label>--%>
<%--                        <input name="code" type="text" class="input" style=" float:left; width:50%;" maxlength="6">--%>
<%--                        <input type="button" class="getting" value="获取验证码">--%>

<%--                    </div>--%>
                    <div class="group">
                        <input id="SignIn" type="button" class="button" value="开始答题">
                        <input id="SignUpReal" type="submit" style="display: none;" value="开始答题">
                    </div>
                    <div class="hr"></div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="${base_href}/static/ui-frame/jquery/1.11.3/jquery.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/layer/layer.js"></script>

<script>
    $(function () {

        $("#SignIn").click(function () {
            var reg = /^[1]\d{10}$/
            var telePhone = $("input[name='userName']").val();
            // 取消验证码的校验
            // var code = $("input[name='code']").val();
            // if (code == '' || code == null) {
            //     layer.msg('请填写验证码');
            //     return false;
            // }
            if (!reg.test(telePhone)) {
                layer.msg('请输入正确的手机号');
            } else {
                var url = basePath + "/external/assessment/checkCode.json";
                $.ajax({
                    url: url,
                    type: "post",
                    data: {"userName": telePhone},
                    dataType: "json",
                    success: function (r) {
                        if (r == null) {
                            layer.msg('服务器一场，请稍后再试');
                        }
                        if (r.code != "OK") {
                            layer.msg(r.message);
                        }
                        if (r.code == "OK") {
                           layer.msg('校验成功！');
                           $("#SignUpReal").click();
                        }
                    }
                })
            }
        })
        /* 获取手机验证码 */
        function getCode(telePhone) {
            var url = basePath + "/getCode.json?telePhone=" + telePhone + "&type=4";
            $.ajax({
                url: url,
                type: "get",
                dataType: "json",
                success: function (r) {
                    if (r == null) {
                        layer.msg('获取手机验证码失败，请稍后再试');
                    }
                    if (r.code != "OK") {
                        layer.msg('获取手机验证码失败，请稍后再试');
                    }
                }

            })
        }

        /*点击改变按钮状态*/
        $('.getting').click(function () {
            var reg = /^[1]\d{10}$/
            var telePhone = $("#telephone").val();
            if (!reg.test(telePhone)) {
                layer.msg('请输入正确的手机号');
            } else {
                getCode(telePhone);
                var btn = $(this);
                var count = 60;
                var resend = setInterval(function () {
                    count--;
                    if (count > 0) {
                        btn.val(count + "秒后可重新获取");
                        btn.css('background', '#a5a6a8');
                        $.cookie("captcha", count, {path: '/', expires: (1 / 86400) * count});
                    } else {
                        clearInterval(resend);
                        btn.val("获取验证码").removeAttr('disabled style');
                    }
                }, 1000);
                btn.attr('disabled', true).css('cursor', 'not-allowed');
            }
        });

        /*仿刷新：检测是否存在cookie*/
        if ($.cookie("captcha")) {
            var count = $.cookie("captcha");
            var btn = $('.getting');
            btn.val(count + '秒后可重新获取').attr('disabled', true).css('cursor', 'not-allowed');
            var resend = setInterval(function () {
                count--;
                if (count > 0) {
                    btn.val(count + '秒后可重新获取').attr('disabled', true).css('cursor', 'not-allowed');
                    btn.css('background', '#a5a6a8');
                    $.cookie("captcha", count, {path: '/', expires: (1 / 86400) * count});
                } else {
                    clearInterval(resend);
                    btn.val("获取验证码").removeClass('disabled').removeAttr('disabled style');
                }
            }, 1000);
        }
    });
</script>
</html>